<template>
    <div id="myapp">
        <div class="myapp-title"><span class="title">My Applications</span><span class="add"
                @click="showAddApp=true;"><i class="iconfont icon-icon_roundadd"></i></span>
        </div>
        <div class="myapp-list" v-loading="isLoading">
            <div class="myapp-item" v-for="(item,index) in myappList" @click="openPage(item)"
                :style="{backgroundColor:item.bgColor,color:item.color}">
                <div class="myapp-icon"><i class="iconfont" :class="item.icon"></i></div>
                <div class="myapp-info">
                    <div class="myapp-name">{{item.name}}</div>
                    <div class="myapp-link">{{item.link}}</div>
                </div>
                <div class="myapp-delete">
                    <i class="iconfont icon-delete2" @click.stop="deleteApp(index)"></i>
                </div>
            </div>
            <el-empty class="common-tips" :description="loading_tips" v-if="myappList.length==0"></el-empty>
        </div>

        <el-drawer title="Add a new app" :visible.sync="showAddApp" direction="rtl" append-to-body size="500px">
            <el-form ref="addForm" :model="addForm" label-width="100px" :rules="addRules">
                <el-form-item label="App Name" prop="name">
                    <el-input v-model="addForm.name" placeholder="The app name here..."></el-input>
                </el-form-item>
                <el-form-item label="App Icon" prop="icon">
                    <el-select popper-class="icon-selector" v-model="addForm.icon" placeholder="The app icon here...">
                        <el-option v-for="item in iconList" :key="item.value" :label="item" :value="item">
                            <i class="iconfont" :class="item"></i>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="App Link" prop="link">
                    <el-input v-model="addForm.link" placeholder="The app link here"></el-input>
                </el-form-item>
                <el-form-item label="Open Type">
                    <el-select v-model="addForm.openType" placeholder="select a open type...">
                        <el-option v-for="item in openTypeList" :key="item.value" :label="item.title"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Colors">
                    <div class="color-selector">
                        <div class="item">
                            <el-color-picker v-model="addForm.bgColor" show-alpha></el-color-picker>
                            <div class="title">BgColor</div>
                        </div>
                        <div class="item">
                            <el-color-picker v-model="addForm.color" show-alpha></el-color-picker>
                            <div class="title">ForeColor</div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addNewApp">Add The Application</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>
<script>
    import request from "@/lib/request";
    export
        default {
            data() {
                return {
                    isLoading: false,
                    loading_tips: "Loading ...",
                    myappList: [],
                    showAddApp: false,
                    addRules: {
                        name: [
                            { required: true, message: 'App name is required', trigger: 'blur' },
                        ],
                        icon: [
                            { required: true, message: 'App icon is required', trigger: 'blur' },
                        ],
                        link: [
                            { required: true, message: 'App link is required', trigger: 'blur' },
                        ],
                    },
                    addForm: {
                        openType: 0,
                        bgColor: "#f5f5f5",
                        color: "#666666"
                    },
                    iconList: [],
                    openTypeList: [
                        {
                            title: "Open in a new window",
                            value: 0,
                        },
                        // {
                        //     title: "Open in this page",
                        //     value: 1,
                        // }
                    ],
                }
            },
            created() {
                for (let i = 52; i <= 124; i++) {
                    this.iconList.push("icon-changyongtubiao-mianxing-" + i);
                }
                for (let i = 1; i <= 118; i++) {
                    this.iconList.push("icon-changyongtubiao-xianxingdaochu-zhuanqu-" + i);
                }
                this.getMyAppList();
            },
            methods: {
                openPage(item) {
                    window.open(item.link);
                },
                deleteApp(index) {
                    let that = this;
                    this.$confirm('Are you sure to delete the app?', 'Warning...', {
                        confirmButtonText: 'Sure',
                        cancelButtonText: 'No',
                        type: 'warning'
                    }).then(function () {
                        that.myappList.splice(index, 1);
                        that.saveMyAppList();
                    }).catch();
                },
                addNewApp() {
                    let that = this;
                    that.$refs["addForm"].validate((valid) => {
                        if (valid) {
                            console.log(that.myappList);
                            that.myappList.push(that.addForm);
                            that.saveMyAppList();
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                saveMyAppList() {
                    let that = this;
                    that.loading_tips = "Loading...";
                    that.isLoading = true;
                    request({
                        url: "https://api.hamm.cn/gitee/app/setMyApp",
                        data: {
                            applist: that.myappList
                        },
                        method: "POST",
                        success(res) {
                            that.addForm = {
                                openType: 0,
                                bgColor: "#f5f5f5",
                                color: "#666666"
                            };
                        },
                        final() {
                            if (that.myappList.length == 0) {
                                that.loading_tips = "No app data";
                            }
                            that.isLoading = false;
                        }
                    });
                },
                getMyAppList() {
                    let that = this;
                    that.loading_tips = "Loading...";
                    that.isLoading = true;
                    request({
                        url: "https://api.hamm.cn/gitee/app/getMyApp",
                        success(res) {
                            that.myappList = res.data.app;
                            if (that.myappList.length == 0) {
                                that.loading_tips = "No app data";
                            }
                        },
                        final() {
                            that.isLoading = false;
                        }
                    });
                },

            }
        }
</script>
<style>
    .myapp-item {
        margin: 10px 20px;
        padding: 10px;
        border-radius: 10px;
        display: flex;
        cursor: pointer;
        transition: margin .2s;
        -webkit-transition: margin .2s;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    }

    .myapp-item:hover {
        margin:10px;
    }

    .myapp-icon .iconfont {
        font-size: 48px;
    }

    .myapp-name {
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .myapp-link {
        font-weight: 300;
        margin-top: 5px;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .myapp-delete {
        display: inline-block;
    }

    .myapp-delete .iconfont {
        font-size: 20px;
        cursor: pointer;
        display: none;
    }

    .myapp-item:hover .myapp-delete .iconfont {
        display: inline-block;
    }

    .myapp-info {
        display: flex;
        margin-left: 10px;
        flex-direction: column;
        flex-grow: 1;
        justify-content: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #myapp {
        position: relative;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #myapp .myapp-title {
        font-size: 16px;
        color: #333;
        margin: 0px 20px;
        border-bottom: 2px dashed #ccc;
        margin-top: 20px;
        padding-bottom: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #myapp .myapp-title .title {
        flex-grow: 1;
    }

    #myapp .myapp-title .add {
        cursor: pointer;
    }

    #myapp .myapp-title .add .iconfont {
        font-size: 18px;
    }

    #myapp .myapp-title .add:hover {
        color: orangered;
    }

    #myapp .myapp-list {
        position: relative;
        flex-grow: 1;
        overflow: hidden;
        overflow-y: auto;
    }

    .color-selector {
        display: flex;
        align-items: center;
    }


    .icon-selector .el-select-dropdown__list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .icon-selector {
        width: 300px;
    }

    .color-selector .item {
        text-align: center;
        margin-right: 20px;
    }

    .color-selector .title {
        line-height: normal;
        color: #999;
    }

    .icon-selector .el-select-dropdown__item {
        display: inline-block;
        width: 10%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }

    .icon-selector .el-select-dropdown__item .iconfont {
        font-size: 32px;
    }

    .el-select {
        display: block;
    }
</style>